import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import {
  Button,
  Spinner
} from 'react-bootstrap';

import { PRODUCT_NAME, CODE } from '../../config';

import { URL } from '../../config';

import { function_login } from '../../actions/passport';

import './less/login.css';

class App extends Component {

  state = {
    email: "",
    password: "",
    errMsg: "",
    loadingFlg: false,
  }

  handleEmailChange (event) {
    this.setState({ email: event.target.value })
  }

  handlePasswordChange (event) {
    this.setState({ password: event.target.value })
  }

  handleSubmit () {
    this.setState({
      loadingFlg: true
    });
    function_login(this.state.email, this.state.password, this.props.dispatch, (result) => {
      if (result.code === CODE.PARAM_ERROR) {
        this.setState({
          errMsg: result.message,
          loadingFlg: false
        });
      } else {
        window.localStorage.setItem("_uid", result.data.uid);
        window.localStorage.setItem("_organizeid", result.data.organizeid);
        window.localStorage.setItem("_timestamp", result.data.timestamp);
        window.localStorage.setItem("_token", result.data.token);
        let redirect_url = sessionStorage.getItem("redirect_page");
        sessionStorage.removeItem("redirect_page");
        if (typeof(redirect_url) == "undefined"){
          this.props.history.push(URL.main_page);
        }else{
          window.location.href = redirect_url;
        }
        this.setState({
          loadingFlg: false
        });
      }
    });
  }

  render () {
    return (
      <div className="root-box">
        <div className="layout-logo layout-logo-for-free-register">
        </div>
        <div className="login-form">
          <h2 className="login-title">{"欢迎来到" + PRODUCT_NAME}</h2>
          <span id="error-tips" className="error-tips">{this.state.errMsg}</span>
          <div className="form-item login-item form-first">
            <div>
              <input
                id="username"
                maxLength="50"
                placeholder="请输入邮箱"
                tabIndex="1"
                type="text"
                onChange={this.handleEmailChange.bind(this)}
                value={this.state.email} />
              <label className="icon-label"><i className="icon-login-user"></i></label>
            </div>
          </div>
          <div className="form-item login-item" id="pwd-div">
            <div>
              <input
                id="password_input"
                type="password"
                tabIndex="2"
                placeholder="请输入密码"
                onChange={this.handlePasswordChange.bind(this)}
                value={this.state.password} />
              <label className="icon-label"><i className="icon-login-psw"></i></label>
            </div>
          </div>

          <div className="form-btn" onClick={this.handleSubmit.bind(this)}>
            <Button variant="primary" type="submit" disabled={this.state.loadingFlg ? true : false} block>
              {this.state.loadingFlg ?
                <Spinner
                  as="span"
                  animation="border"
                  size="sm"
                  role="status"
                  aria-hidden="true"
                />
                : null}
              登&nbsp;&nbsp;&nbsp;&nbsp;录
            </Button>
          </div>

          <div className="form-bottom" align="left">
            <span>还没有帐号?</span>
            <Link to={URL.register_page}>
              注册公司
              <i className="icon icon-register-company"></i>
            </Link>
            <Link className="forget-password" to={URL.findpwd_page}>忘记密码?</Link>
          </div>
        </div>
      </div>
    )
  }
}

function mapStateToProps (state) {
  return {}
}

export default connect(mapStateToProps)(App);